import React, { useCallback, useEffect, useState } from "react";
import { DownOutlined, FileTextOutlined, BarsOutlined, CloudDownloadOutlined, CloudUploadOutlined } from "@ant-design/icons";
import { Form, Button, Select, Input, Col, Row, Dropdown, Menu, Space, Popover, Card, Badge, message, Popconfirm } from "antd";
import { useNavigate, useLocation } from "react-router-dom";
import { getGoodsSystemSpuLogPage, getGoodsSystemSkuLogPage } from "@/pages/GoodsModule/systemGoods/service";
import useLogColumns from "../Actions/SelectLogModal/logColumns";
import useLogSpuColumns from "../Actions/SelectLogModal/useLogSpuColumns";
import ViewLogButton from "@/views/components/ViewLogButton";
import ExcelImportModal from "./ExcelImportModal";
import ExcelImportProductsModal from "./ExcelImportProductsModal";
import ShopImportModal from "./ShopImportModal";
import BatchModifyProductsModal from "./BatchModifyProductsModal";
import InventorySynchronizationModal from "./InventorySynchronizationModal";
import SpuViewModel from "./Spu/ViewModal";
import SelectActions from "@/views/components/SelectActions";
import SkuRemarkModal from "./SkuRemarkModal";
import HistoryPriceModal from "./HistoryPriceModal";
import UnmatchedSupplierProductsModal from "./UnmatchedSupplierProductsModal";
import SelectLogModal from "./SelectLogModal";
import BatchDeleteGoodsModal from "./BatchDeleteGoodsModal";
import CheckGoodsModal from "./CheckGoodsModal";
import SetDefaultRunningVolumeSkuModal from "./SetDefaultRunningVolumeSkuModal";
import UpdateSkuPriceModal from "./UpdateSkuPriceModal";
import SetCertificateOfConformityModal from "./SetCertificateOfConformityModal";
import BatchEditSpuModal from "./Spu/BatchEditSpuModal";
import EditSkuModal from "./EditSkuModal";
import GoodsMatchDrawer from "./GoodsMatchDrawer";
import ActionExportExcelModal from "./ActionExportExcelModal";
import StockSyncModal from "./StockSyncModal";
import ReturnDestinationModal from "./ReturnDestinationModal";
import AutomaticGenerateSetModal from "./AutomaticGenerateSetModal";
import EncodeSetting from '../../../common/EncodeSetting';
import FilterUpdateGoods from './FilterUpdateGoods';
import CancelMatch from './CancelMatch';

import IconFont from "@/components/IconFont";

function Dialogs(props) {
	const {
		dialog,
		modalProps,
		DialogEnum,
		searchType,
		onCancel,
		isSkuType,
		setTabValue,
		fetchList,
		selectedKeys,
		selectedRows,
		handle,
		form,
		pagination
	} = props;

	const dialogComponents = {
		[DialogEnum.ExcelImportModal]: <ExcelImportModal onCancel={onCancel} {...modalProps} />,
		[DialogEnum.ExcelImportProductsModal]: <ExcelImportProductsModal isSkuType={isSkuType} onCancel={onCancel} />,
		[DialogEnum.ShopImportModal]: <ShopImportModal onCancel={onCancel} {...modalProps} />,
		[DialogEnum.BatchModifyProductsModal]: (
			<BatchModifyProductsModal
				fetchList={fetchList}
				selectedKeys={selectedKeys}
				onCancel={onCancel}
				searchType={searchType}
				{...modalProps}
			/>
		),
		[DialogEnum.InventorySynchronizationModal]: (
			<InventorySynchronizationModal
				isSkuType={isSkuType}
				fetchList={fetchList}
				selectedKeys={selectedKeys}
				onCancel={onCancel}
				{...modalProps}
			/>
		),
		[DialogEnum.SpuViewModel]: <SpuViewModel onCancel={onCancel} fetchList={fetchList} {...modalProps} />,
		[DialogEnum.SkuRemarkModal]: (
			<SkuRemarkModal onCancel={onCancel} {...modalProps} fetchList={fetchList} selectedKeys={selectedKeys} />
		),
		[DialogEnum.HistoryPriceModal]: <HistoryPriceModal {...modalProps} onCancel={onCancel} />,
		[DialogEnum.UnmatchedSupplierProductsModal]: (
			<UnmatchedSupplierProductsModal isSkuType={isSkuType} onCancel={onCancel} handle={handle} />
		),
		[DialogEnum.SelectLogModal]: <SelectLogModal isSkuType={isSkuType} onCancel={onCancel} handle={handle} {...modalProps} />,
		[DialogEnum.BatchDeleteGoodsModal]: (
			<BatchDeleteGoodsModal
				{...modalProps}
				isSkuType={isSkuType}
				setTabValue={setTabValue}
				fetchList={fetchList}
				selectedKeys={selectedKeys}
				onCancel={onCancel}
			/>
		),
		[DialogEnum.CheckGoodsModal]: <CheckGoodsModal {...modalProps} onCancel={onCancel} />,
		[DialogEnum.SetDefaultRunningVolumeSkuModal]: (
			<SetDefaultRunningVolumeSkuModal fetchList={fetchList} selectedKeys={selectedKeys} onCancel={onCancel} />
		),
		[DialogEnum.UpdateSkuPriceModal]: (
			<UpdateSkuPriceModal selectedRows={selectedRows} fetchList={fetchList} onCancel={onCancel} {...modalProps} />
		),
		[DialogEnum.SetCertificateOfConformityModal]: (
			<SetCertificateOfConformityModal selectedKeys={selectedKeys} fetchList={fetchList} onCancel={onCancel} {...modalProps} />
		),
		[DialogEnum.BatchEditSpuModal]: <BatchEditSpuModal selectedKeys={selectedKeys} fetchList={fetchList} onCancel={onCancel} />,
		[DialogEnum.EditSkuModal]: <EditSkuModal onCancel={onCancel} fetchList={fetchList} {...modalProps} />,
		[DialogEnum.GoodsMatchDrawer]: <GoodsMatchDrawer {...modalProps} />,
		[DialogEnum.ActionExportExcelModal]: <ActionExportExcelModal {...modalProps} />,
		[DialogEnum.StockSyncModal]: <StockSyncModal {...modalProps}></StockSyncModal>,
		[DialogEnum.ReturnDestinationModal]: <ReturnDestinationModal {...modalProps} fetchList={fetchList}></ReturnDestinationModal>,
		[DialogEnum.AutomaticGenerateSetModal]: (
			<AutomaticGenerateSetModal onCancel={onCancel} fetchList={fetchList} {...modalProps} />
		),
		[DialogEnum.EncodeSetting]: <EncodeSetting onCancel={onCancel} {...modalProps}></EncodeSetting>,
		[DialogEnum.FilterUpdateGoods]: <FilterUpdateGoods onCancel={onCancel} {...modalProps}></FilterUpdateGoods>,
		[DialogEnum.CancelMatch]: <CancelMatch onCancel={onCancel} fetchList={fetchList} {...modalProps} />,

	};
	return dialogComponents[dialog] || null;
}

const Actions = props => {
	const {
		searchType,
		isSkuType,
		setTabValue,
		children,
		dialog,
		setDialog,
		modalProps,
		DialogEnum,
		handle,
		dataSource,
		fetchList,
		selectedKeys,
		selectedRows,
		notMatchNum,
		form,
		pagination,
		// ColsSettingProps
		tableKey,
		columns,
		formData,
		RefOriginalData
	} = props;
	const [logType, setLogType] = useState(1);
	const { columns1, isLogSkuType } = useLogColumns({ logType });
	const { columns2, isLogSpuType } = useLogSpuColumns({ logType });
	const location = useLocation();

	useEffect(() => {
		if (dialog) setDialog(dialog);
	}, [dialog]);

	useEffect(() => {
		if (location.pathname == "/views/goods/system" && location?.state?.dialog == "1") {
			setDialog(DialogEnum.EncodeSetting);
			window.history.replaceState("", "");
		}
	}, [location.pathname]);

	function showModal(name) {
		if (selectedKeys.length === 0) {
			message.warning("请勾选商品");
			return;
		}
		setDialog(name);
	}

	function checkSelected(callBack) {
		if (selectedKeys.length === 0) {
			message.warning("请勾选商品");
			return;
		}
		callBack && callBack();
	}

	return (
		<>
			<Dialogs {...props} />
			<Space className="views-action-left" style={{ height: 28 }} >
				{!isSkuType && (
					<SelectActions
						overlayClassName="SelectActions"
						name="新增商品"
						type="primary"
						onClick={() => {
							handle.add();
						}}
					></SelectActions>
				)}
				{/* <Badge count={notMatchNum} overflowCount={999} style={{ zIndex: 9 }}>
					<SelectActions
						name={isSkuType ? "待匹配商品" : "待匹配的款"}
						onClick={() => {
							setDialog(DialogEnum.UnmatchedSupplierProductsModal);
						}}
					></SelectActions>
				</Badge> */}
				{!isSkuType ? (
					<SelectActions
						overlayClassName="SelectActions"
						name="批量修改商品"
						onClick={() => {
							handle.batchUpdateSpu(selectedKeys);
						}}
					></SelectActions>
				) : (
					<SelectActions
						overlayClassName="SelectActions"
						name={<span style={{ display: "inline-block", width: 84, textAlign: "left" }}>批量修改商品</span>}
						options={[
							{
								label: "批量修改基础信息",
								action() {
									handle.batchUpdateGoodsSkuInfo({ ids: selectedKeys, tabsType: 0 });
								}
							},
							{
								label: "修改价格信息",
								action() {
									handle.batchUpdateGoodsSkuInfo({ ids: selectedKeys, tabsType: 1 });
								}
							},
							{
								label: "修改其他信息",
								action() {
									handle.batchUpdateGoodsSkuInfo({ ids: selectedKeys, tabsType: 2 });
								}
							}
							// {
							// 	label: "修改图片信息",
							// 	action() {
							// 		handle.batchUpdateGoodsSkuInfo({ ids: selectedKeys, tabsType: 0 });
							// 	}
							// }
						]}
					/>
				)}

				<SelectActions
					overlayClassName="SelectActions"
					name={<span style={{ display: "inline-block", width: 60, textAlign: "left" }}>库存同步</span>}
					options={[
						{
							label: "开启同步",
							action() {
								handle.setSyncInventoryGoods({ syncStatus: 1, ids: selectedKeys, isSkuType }, fetchList);
							}
						},
						{
							label: "禁止同步",
							action() {
								handle.setSyncInventoryGoods({ syncStatus: 0, ids: selectedKeys, isSkuType }, fetchList);
							}
						},
						{
							label: "库存同步到店铺",
							action() {
								showModal(DialogEnum.InventorySynchronizationModal);
							}
						}
					]}
				/>
				<SelectActions
					overlayClassName="SelectActions"
					name="批量删除"
					onClick={() => {
						showModal(DialogEnum.BatchDeleteGoodsModal);
					}}
				></SelectActions>
				{/* <SelectActions
					overlayClassName="SelectActions"
					name={<span style={{ display: "inline-block", width: 94, textAlign: "left" }}>启用/禁用/删除</span>}
					options={[
						{
							label: "批量启用",
							action() {
								handle.batchUpdateStatus({ isSkuType, ids: selectedKeys, status: 1 }, fetchList);
							}
						},
						{
							label: "批量备用",
							action() {
								handle.batchUpdateStatus({ isSkuType, ids: selectedKeys, status: 2 }, fetchList);
							}
						},
						{
							label: "批量禁用",
							action() {
								handle.batchUpdateStatus({ isSkuType, ids: selectedKeys, status: 0 }, fetchList);
							}
						},
						{
							label: "批量删除",
							action() {
								showModal(DialogEnum.BatchDeleteGoodsModal);
							}
						},
						{
							label: "检测无用的商品",
							action() {
								setDialog(DialogEnum.CheckGoodsModal);
							}
						}
					].filter(item => (isSkuType ? item : item.label != "检测无用的商品"))}
				/> */}
				<SelectActions
					overlayClassName="SelectActions"
					name={<span style={{ display: "inline-block", width: 36, textAlign: "left" }}>导入</span>}
					options={[
						{
							label: "从Excel导入商品",
							action() {
								setDialog(DialogEnum.ExcelImportProductsModal);
							}
						},
						{
							label: "Excel导入款信息",
							action() {
								setDialog(DialogEnum.ExcelImportModal);
							}
						},
						{
							label: "从店铺导入商品",
							action() {
								setDialog(DialogEnum.ShopImportModal);
							}
						}
					]}
				></SelectActions>

				<SelectActions
					overlayClassName="SelectActions"
					name={<span style={{ display: "inline-block", width: 36, textAlign: "left" }}>导出</span>}
					options={
						isSkuType
							? [
								{
									label: "导出商品资料",
									action() {
										handle.export({ text: this.label, isSkuType, selectedKeys, form, pagination });
									}
								},
								{
									label: "导出历史成本价",
									action() {
										handle.export({ text: this.label, isSkuType, selectedKeys, form, pagination });
									}
								},
								{
									label: "导出历史采购价",
									action() {
										handle.export({ text: this.label, isSkuType, selectedKeys, form, pagination });
									}
								}
							]
							: [
								{
									label: "导出款式信息",
									action() {
										handle.export({ text: this.label, isSkuType, selectedKeys, form, pagination, imgType: 0 });
									}
								},
								{
									label: "导出款式信息（图）",
									action() {
										handle.export({ text: this.label, isSkuType, selectedKeys, form, pagination, imgType: 1 });
									}
								}
							]
					}
				></SelectActions>
				<SelectActions
					overlayClassName="SelectActions"
					name="供应商匹配"
					onClick={() => {
						checkSelected(() => {
							//跑量商品不能使用供应商匹配和精准匹配
							if (selectedRows.filter(e => e.runningVolumeStatus == 2).length) return message.warning("请选择非跑量商品");

							const data = isSkuType
								? selectedRows.map(e => ({ ...e, skuId: e.id }))
								: selectedRows.map(e => ({ ...e, spuId: e.id, spuImage: e.image, spuName: e.spuName }));
							handle.matchGoods({ defaultTab: "供应商匹配", data, isSkuType });
						});
					}}
				></SelectActions>
				<SelectActions
					overlayClassName="SelectActions"
					name="修改价格"
					onClick={() => {
						handle.updateSkuPrice(selectedRows, {}, isSkuType);
					}}
				></SelectActions>
				<SelectActions
					overlayClassName="SelectActions"
					name={<span style={{ display: "inline-block", width: 60, textAlign: "left" }}>解除匹配</span>}
					options={[
						{
							label: "已勾选的商品",
							action() {
								handle.batchCancelMatch({ operaType: 1, ids: selectedKeys, isSkuType, formData }, fetchList);
							}
						},
						{
							label: "已筛选的商品",
							action() {
								handle.batchCancelMatch({ operaType: 2, ids: selectedKeys, isSkuType, formData }, fetchList);
							}
						},
					]}
				></SelectActions>
				{
					isSkuType &&
					<SelectActions
						overlayClassName="SelectActions"
						options={[
							{
								label: "筛选项",
								action() {
									showModal(DialogEnum.SkuRemarkModal);
								}
							},
							// {
							// 	label: "修改价格",
							// 	action() {
							// 		handle.updateSkuPrice(selectedRows);
							// 	}
							// },
							// {
							// 	label: "设为默认跑量商品",
							// 	action() {
							// 		handle.setDefaultRunningVolume(selectedRows);
							// 	}
							// },
							{
								label: "设置合格证",
								action() {
									// console.log("二期");
									handle.setQualifiedProve(selectedRows);
								}
							},
							{
								label: "退货去向",
								action() {
									handle.returnDirection({ selectedRows });
								}
							},
							{
								label: "过滤更新商品",
								action() {
									handle.filterGoods({ selectedRows, form });
								}
							},
							// {
							// 	label: "批量解除默认匹配",
							// 	action() {
							// 		handle.batchRemoveDefaultMatch({ selectedRows });
							// 	}
							// }
						].filter(item => (isSkuType ? item : item.label == "供应商匹配"))}
					>
						<span className="font14">更多操作</span>
						<DownOutlined />
					</SelectActions>
				}
			</Space>
			<Space className="views-action-right">
				<Button
					type="text"
					onClick={() => {
						handle.saveEditRow(dataSource, fetchList, {
							successFn: () => {
								RefOriginalData.current = {};
							}
						});
					}}
				>
					<IconFont type="icona-lujing15" />
					列表保存
				</Button>
				{logType == 1 && (
					<ViewLogButton
						tableKey={isLogSkuType ? "SKULogTable" : "SPULogTable"}
						columns={columns1}
						logType={logType}
						width="1296px"
						height="491px"
						tableHeight="420px"
						tableRequest={isLogSkuType && logType == 1 ? getGoodsSystemSkuLogPage : getGoodsSystemSpuLogPage}
						searchSpan={6}
					>
						<SelectActions
							options={[
								{
									value: "商品修改日志",
									label: "商品修改日志",
									onClick: () => {
										setLogType(1);
									}
								},
								{
									value: "商品删除日志",
									label: "商品删除日志",
									onClick: () => {
										setLogType(2);
									}
								}
							]}
						>
							<FileTextOutlined className="main-color" />
							<span className="line-height-21" style={{ display: "inline-block" }}>
								查看日志
							</span>
						</SelectActions>
					</ViewLogButton>
				)}
				{logType == 2 && (
					<ViewLogButton
						tableKey={isLogSkuType ? "SKULogTable" : "SPULogTable"}
						columns={columns2}
						logType={logType}
						width="1296px"
						height="491px"
						tableHeight="420px"
						tableRequest={getGoodsSystemSpuLogPage}
						searchSpan={6}
					>
						<SelectActions
							options={[
								{
									value: "商品修改日志",
									label: "商品修改日志",
									onClick: () => {
										setLogType(1);
									}
								},
								{
									value: "商品删除日志",
									label: "商品删除日志",
									onClick: () => {
										setLogType(2);
									}
								}
							]}
						>
							<FileTextOutlined className="main-color" />
							<span className="line-height-21" style={{ display: "inline-block" }}>
								查看日志
							</span>
						</SelectActions>
					</ViewLogButton>
				)}
				<Button
					type="text"
					onClick={() => {
						setDialog(DialogEnum.EncodeSetting);

					}}
				>
					<IconFont type="iconzidongshengchengshezhi" />
					自动生成设置
				</Button>
				{children}
			</Space>
		</>
	);
};
export default Actions;
